import React, { Component } from 'react'
import axios from "axios"
import Procss from "../scss/Product.module.scss"

export default class Product extends Component {
    state = {
        good: {}
    }
    componentDidMount() {
        // console.log(this.props);
        axios.get("http://s.linweiqin.com/api/s/getProductDetail", {
            params: {
                pid: this.props.match.params.pid
            }
        }).then(res => {
            this.setState({
                good: res.data.wdata
            })
        })
    }
    backTohome = () => {
        window.history.back()
    }
    Topay = (pid) => {
        // 1. 进行路由跳转
        this.props.history.push("/pay/" + pid);
    }
    render() {
        return (
            <div className={Procss.product}>
                {/* 主页头部 */}
                <div className={Procss.ProHeader}>
                    <div className={Procss.ProHeaderLef} onClick={this.backTohome}><span className="iconfont proback">&#xe66e;</span></div>
                    <div className={Procss.ProHeaderCen}>产品详情</div>
                    <div className={Procss.ProHeaderRig}><span className="iconfont"></span></div>
                </div>
                {/* 主体部分 */}
                <div className={Procss.ProBody}>
                    <div className={Procss.ProBanner}>
                        <img src={this.state.good.product_url} alt="" />
                    </div>
                    <div className={Procss.ProTru}>
                        <h2>{this.state.good.product_name}</h2>
                        <span>￥{this.state.good.product_price}</span><u>￥{this.state.good.product_origin_price}</u>
                    </div>
                    <div className={Procss.ProChooce}>
                        <span>选择规格</span>
                        <b>{">"}</b>
                    </div>
                    <div className={Procss.ProPhone}>
                        <span className="iconfont">&#xe64b;</span>
                    020-8888-8888
                    </div>
                    <div className={Procss.ProImgs} dangerouslySetInnerHTML={{ __html: this.state.good.product_desc }}>

                    </div>
                </div>
                {/* 底部 */}
                <div className={Procss.ProFoot}>
                    <div className={Procss.ProCart}> <span className="iconfont">&#xe63e;</span> <i>2</i></div>
                    <div className={Procss.ProBuynow} onClick={this.Topay.bind(this, this.state.good.pid)}>立即购买</div>
                    <div className={Procss.ProAddcart}>加入购物车</div>
                </div>

            </div>
        )
    }

}
